{% extends "base.html" %}
{% block title %}<title>豆瓣图片</title>{% endblock %}
{% block style %}{% endblock %}
{% block body1 %}{% include "nav.html" %} {% endblock %}
{% block bodyside %}{% endblock %}
{% block bodymain %}
    <div class="row clearfix">
        <div class="col-md-12">
          <ul class="nav nav-pills">
                 <li><a href="yanzhi"  >颜值</a></li>
                <li><a href="daxiong"  >大胸</a></li>
                <li><a href="heisi" >黑丝</a></li>
                <li><a href="qiaotun"  >翘臀</a></li>
                <li><a href="meitui"  >美腿</a></li>
                <li><a href="dazhahui" >大杂烩</a></li>
          </ul>
        </div>
        </div>
        <div class="row clearfix">
        <div class="col-md-12">
    <nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
      <a>当前为第<span id="nowpage">1</span>页,一共<span id="totalpage">1</span>页</a>
    <li class="next"><a href="#">下一页<span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
        </div>
        </div>
<div class="row clearfix">
<p id="list_result"></p>
        </div>
    <div class="row clearfix">
    <div class="col-md-6 col-md-offset-4">
    <nav >
        <ul class="pagination" >
    	<li><a class="previous" href="#">«</a></li>
    	<li><a class="btn" href="#">1</a></li>
    	<li><a class="btn" href="#">2</a></li>
        <li><a class="btn" href="#">3</a></li>
    	<li><a class="btn"  href="#">4</a></li>
    	<li><a class="btn"  href="#">5</a></li>
    	<li><a class="next"  href="#">»</a></li>
        </ul>
     </nav>
        </div>
        </div>
{% endblock %}

{% block script %}<script>
$.showlist=function(nowpage){
    var url = ['<div class="col-md-3">', '<div class="col-md-3">', '<div class="col-md-3">', '<div class="col-md-3">'];
    var num = 0;
    var j
    var index=nowpage*imgcount
    var temp = '<div class="container-fluid"><div class="row clearfix">';
    for (var i =index; i <index+imgcount; i++) {
        j = num % 4;
        num = num + 1;
        url[j] = url[j] + '<img class="img-responsive" src=';
        url[j] += list[i][1];
        url[j] = url[j] + ' ><span>'+list[i][0]+'</span>';

    }
    for (var k = 0; k <= 3; k++) {
        url[k] = url[k] + '</div> ';
    }
    for (var t= 0; t<= 3; t++) {
        temp=temp+url[t];
    }
    temp=temp+'</div></div>';
    $('#list_result').html(temp);
    $('#nowpage').html(nowpage+1);
}
$(document).ready(function(){
    $.getJSON("/json/image/{{item}}/",function (data){
		    list=data.imgurl;
            imgcount=4*10;
		    var totalpage= Math.ceil(list.length/imgcount);
            $.showlist(0);
            $('#totalpage').html(totalpage);
        });
        $('.btn').click(function(){
            var pagenum=$(this).text();
            $.showlist(pagenum);
        });
        $('.previous').click(function(){
            var pagenum=parseInt($('#nowpage').text())-2;
            $.showlist(pagenum);
        });
        $('.next').click(function(){
            var pagenum=parseInt($('#nowpage').text());
            $.showlist(pagenum);
    })
	});
</script>{% endblock %}
